<template>
  <div className="app-title">

    <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
             @open="handleOpen" @close="handleClose" :collapse="false"
             background-color="#ffffff"  text-color="#000000"
             active-text-color="#6fb0f1" :unique-opened="true"
    >
      <el-menu-item index="1" @click="aaclick()">
        <i class="el-icon-setting"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2" >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">用户管理</span>
        </template>
        <el-menu-item-group>
          <span slot="title">分组一</span>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="3">
        <i class="el-icon-menu"></i>
        <span slot="title">图像识别管理</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-document"></i>
        <span slot="title">消息管理</span>
      </el-menu-item>

    </el-menu>
  </div>

</template>

<script>
module.exports = {
  data: function () {
    return {
      isCollapse: true,
      menu:[]
    }
  },
  mounted:function (){
   this.getMenu()
    console.log(this.menu)
  },
  methods:{
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    aaclick(){
      this.$emit('aaclick',"{key,keyPath}")
    },
    getMenu(){
      let that=this
      axios({
          method: 'get',
          url: "/getMenu",
        }).then(function (resp) {
          that.menu=resp.data
        }).catch(function (error) {
        });
      },
  }
}
</script>

<style scoped>
/*@import "../css/title.css";*/
</style>